import React, { useState, useRef } from 'react'
import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from '../components/Icon';
import { useNavigation } from '@react-navigation/native';
export const Examples = (props: any) => {
  const navigation = useNavigation()
  const ListBtn = ({ title, to }: any) => {
    return (
      <TouchableOpacity activeOpacity={0.8} style={styles.list} onPress={() => navigation.navigate(to)}>
        <Text style={{ fontSize: 18, }}>{title} </Text>
        <Icon name='right' size={18} color="#333"></Icon>
      </TouchableOpacity>
    )
  }
  return (
    <ScrollView style={{ backgroundColor: '#fff', flex: 1, width: '100%', }}>
      <View style={styles.main}><ListBtn title="Button-按钮" to="Button"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Radio-单选" to="Radio"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Checkbox-多选" to="Checkbox"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Field-输入框" to="Field"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Overlay-遮罩层" to="Overlay"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Toast-轻提示" to="Toast"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Dialog-弹窗" to="Dialog"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Picker-选择器" to="Picker"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Switch-开关" to="Switch"></ListBtn></View>
      <View style={styles.main}><ListBtn title="SwipeCell-滑动单元格" to="SwipeCell"></ListBtn></View>
      <View style={styles.main}><ListBtn title="Swiper-轮播图" to="Swiper"></ListBtn></View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  main: {
    padding: 10,
  },
  list: {
    flex: 1,
    backgroundColor: '#f2f2f2',
    flexDirection: "row",
    padding: 8,
    borderRadius: 8,
    overflow: 'hidden',
    paddingLeft: 16,
    justifyContent: 'space-between',
  }
})